<ng-container *ngIf="showList">

  <div class="page-title clearfix">
    <div class="title">用户管理</div>
    <button nz-button class="fr btn-green" title="添加领导人" [routerLink]="routerLinks.user.add">
      <i class="anticon anticon-user-add"></i>添加领导人
    </button>
  </div>

  <div class="panel panel-body">
    <!--搜索 start-->
    <form nz-form (submit)="queryUserList(1)">
      <div class="search-group">
        <span class="search-title">账号：</span>
        <div class="search-main">
          <input nz-input name="account"
                 [(ngModel)]="searchParams.account"
                 placeholder="请输入用户账号">
        </div>
      </div>
      <div class="search-group">
        <span class="search-title">星级：</span>
        <div class="search-main" style="width: 120px;">
          <nz-select name="star" [(ngModel)]="searchParams.star" [nzAllowClear]="true" [nzPlaceHolder]="'用户星级'">
            <nz-option *ngFor="let option of stars" [nzLabel]="option.val" [nzValue]="option.key"></nz-option>
          </nz-select>
        </div>
      </div>
      <div class="search-group">
        <span class="search-title">账户状态：</span>
        <div class="search-main">
          <nz-select name="state" [(ngModel)]="searchParams.state" [nzPlaceHolder]="'账户状态'">
            <nz-option *ngFor="let option of userStateList" [nzLabel]="option.val" [nzValue]="option.key"></nz-option>
          </nz-select>
        </div>
      </div>
      <div class="inline-block">
        <div class="search-group">
          <span class="search-title">用户类型：</span>
          <div class="search-main" style="width: 180px;">
            <nz-select name="userType" [(ngModel)]="searchParams.userType" [nzPlaceHolder]="'用户类型'">
              <nz-option *ngFor="let option of userTypeList" [nzLabel]="option.val" [nzValue]="option.key"></nz-option>
            </nz-select>
          </div>
        </div>
        <div class="inline-block">
          <button nz-button class="ml-20 mr" [nzType]="'primary'" title="搜索" type="submit">
            <i class="anticon anticon-search"></i><span>搜索</span>
          </button>
          <button nz-button class="mr" title="重置" type="reset" (click)="resetSearch()">
            <i class="anticon anticon-sync"></i><span>重置</span>
          </button>
        </div>
      </div>
      <div class="inline-block ml-20">
        <button nz-button nz-popconfirm nzTitle="确定要【冻结】全部账户吗？"
                (nzOnConfirm)="updateState('',userStates.frozen)" class="btn-danger mr" title="全部冻结">
          <i class="iconfont icon-dongjieyonghu"></i> 全部冻结
        </button>
        <button nz-button nz-popconfirm nzTitle="确定要【解冻】全部账户吗？"
                (nzOnConfirm)="updateState('',userStates.active)" class="btn-green mr" title="全部解冻">
          <i class="iconfont icon-jiedong"></i> 全部解冻
        </button>
      </div>
    </form>
    <!--搜索 end-->
  </div>
  <div class="panel">
    <nz-table #nzTable
              [nzData]="userList.voList"
              [nzLoading]="_loading"
              [nzFrontPagination]="false"
              [nzShowTotal]="totalRow"
              [(nzPageSize)]="userList.pageSize"
              [nzTotal]="userList.totalRow"
              [nzPageIndex]="userList.curPage"
              nzShowSizeChanger
              nzShowQuickJumper
              [nzPageSizeOptions]="pageSize"
              (nzPageIndexChange)="queryUserList($event)"
              (nzPageSizeChange)="queryUserList(userList.curPage,$event)">
      <thead nz-thead>
      <ng-template #totalRow>共 {{userList.totalRow}} 条数据</ng-template>
      <tr>
        <th nz-th class="text-center" nzWidth="5%"><span>序号</span></th><!--序号-->
        <th nz-th class="text-center" nzWidth="10%"><span>账户信息</span></th><!--账户信息-->
        <th nz-th class="text-center" nzWidth="10%"><span>星级</span></th><!--星级-->
        <th nz-th class="text-center" nzWidth="7%"><span>是领导人</span></th><!--是否是领导人 Y,N-->
        <th nz-th class="text-center" nzWidth="8%"><span>真实姓名</span></th><!--真实姓名-->
        <th nz-th class="text-center" nzWidth="10%"><span>身份证号</span></th><!--身份证号-->
        <!--<th nz-th class="text-center" nzWidth="10%"><span>支付宝账户</span></th>&lt;!&ndash;支付宝账户&ndash;&gt;-->
        <!--<th nz-th class="text-center" nzWidth="10%"><span>微信账户</span></th>&lt;!&ndash;微信账户&ndash;&gt;-->
        <th nz-th class="text-center" nzWidth="10%"><span>状态</span></th><!--状态-->
        <th nz-th class="text-center" nzWidth="10%"><span>创建时间</span></th><!--创建时间-->
        <th nz-th class="text-center" nzWidth="15%"><span>操作</span></th><!--操作-->
      </tr>
      </thead>
      <tbody nz-tbody>
      <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index">
        <tr nz-tbody-tr>
          <td nz-td class="text-center">{{i+1}}</td>
          <td nz-td class="text-center">{{data.account}}</td>
          <td nz-td class="text-center">
            <nz-rate [ngModel]="data.star" title="星级" nzDisabled [nzCount]="7"></nz-rate>
            <div class="font12">{{data.star || 0}}级</div>
          </td>
          <td nz-td class="text-center">
          <span
            [ngClass]="{'color-orange':data.leader===userTypes.leader,
            'color-green':data.leader===userTypes.areaManager}">
          {{data.leader | enumName: userType}}
          </span>
          </td>
          <td nz-td class="text-center">{{data.realName}}</td>
          <td nz-td class="text-center font12">{{data.idCard || '-'}}</td>
          <!--<td nz-td class="text-center">{{data.alipay || '-'}}</td>-->
          <!--<td nz-td class="text-center">{{data.wechat || '-'}}</td>-->
          <td nz-td class="text-center">
            <nz-badge nzStatus="success" *ngIf="data.state === userStates.active"></nz-badge>
            <nz-badge nzStatus="default" *ngIf="data.state === userStates.delete"></nz-badge>
            <nz-badge nzStatus="error" *ngIf="data.state === userStates.frozen"></nz-badge>
            {{data.state | enumName:userStateCode}}
          </td>
          <td nz-td class="text-center font12">{{data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
          <td nz-td class="text-center">
            <button nz-button class="btn-warning-o mr" title="重置密码" (click)="resetPassword(data.code)">
              <i class="anticon anticon-unlock"></i></button>
            <button nz-button class="btn-success-o mr" [routerLink]="[routerLinks.user.detail,data.code]"
                    title="详情">
              <i class="anticon anticon-eye-o"></i></button>
            <button nz-button nz-popconfirm nzTitle="确定要【冻结】该账户吗"
                    (nzOnConfirm)="updateState(data.code,userStates.frozen)"
                    class="btn-danger-o mr" title="冻结" *ngIf="data.state === userStates.active">
              <i class="iconfont icon-dongjieyonghu"></i></button>
            <button nz-button nz-popconfirm nzTitle="确定要【解冻】该账户吗"
                    (nzOnConfirm)="updateState(data.code,userStates.active)"
                    class="btn-green-o mr" title="解冻" *ngIf="data.state === userStates.frozen">
              <i class="iconfont icon-jiedong"></i></button>
            <button nz-button class="btn-blue-o mr" title="登录用户" (click)="loginUserAccount(data.account)">
              <i class="iconfont icon-tiaozhuan font14"></i></button>
          </td>
        </tr>
      </ng-template>
      </tbody>
    </nz-table>
  </div>

  <!--添加修改窗口-->
  <nz-modal [(nzVisible)]="isResetPwdVisible" nzTitle="重置密码" (nzOnCancel)="handleCancel()" (nzOnOk)="updateUserPwd()"
            [nzOkLoading]="isOkLoading">
    <form nz-form [formGroup]="validateForm" class="form-wrap" (submit)="updateUserPwd()">
      <!--price start-->
      <nz-form-item>
        <nz-form-label [nzSm]="7" nzFor="password" nzRequired>新密码</nz-form-label>
        <nz-form-control [nzSm]="12" [nzValidateStatus]="getFormControl('password')">
          <input nz-input formControlName="password" type="password" id="password" placeholder="密码">
          <nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').errors">
            <ng-container *ngIf="getFormControl('password').hasError('required')">请输入新密码</ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </form>
  </nz-modal>

</ng-container>


<!--路由嵌套 begin-->
<router-outlet (activate)="activate($event)" (deactivate)="onDeactivate($event)"></router-outlet>
<!--路由嵌套 end-->
